<template>
  <div class="GRoleDetail">
    <zyInfoPanel :title="pageTitle" :showUnfoldButton="false" class="baseInfo">
      <div class="roleInfo">
        <div class="roleItem">
          <div class="roleItemTitle required">角色名称</div>
          <div class="roleItemContent">
            <el-input v-model="role_name" placeholder="请输入角色名称（不可超过10个字符）" maxlength="10"
                      :disabled="type!='add'"></el-input>
          </div>
        </div>
        <div class="roleItem">
          <div class="roleItemTitle required">所属组织</div>
          <div class="roleItemContent">
            <el-select v-model="department_id" placeholder="请选择">
              <el-option v-for="option in organizationList" :key="option.value" :label="option.label"
                         :value="option.value"></el-option>
            </el-select>
          </div>
        </div>
        <div class="roleItem remark">
          <div class="roleItemTitle">备注</div>
          <div class="roleItemContent">
            <zy-input type="textarea" :rows="3" placeholder="请输入备注（不可超过50个字符）" show-word-limit maxlength="50"
                      v-model="remark" :disabled="disabled"></zy-input>
          </div>
        </div>
      </div>
    </zyInfoPanel>
    <zyInfoPanel title="角色授权" :showUnfoldButton="false" class="baseInfo">
      <div class="roleContent">
        <div class="roleListHeader">角色授权</div>
        <div class="roleList">
          <div class="roleItem roleTitle">
            <div class="title menu_1">一级菜单</div>
            <div class="title menu_2">二级菜单</div>
            <div class="title menu_3">操作权限</div>
          </div>
          <div class="roleItem menuLv1Content" v-for="roleLv1 in role_list">
            <div class="menuLv1">
              <el-checkbox v-model="roleLv1.checked" @change="roleChange($event, roleLv1.roleLv)"
                           :disabled="disabled">
                {{roleLv1.menus_name}}
              </el-checkbox>
            </div>
            <div class="menuLv2Content">
              <div class="menuLv2 roleItem" v-for="roleLv2 in roleLv1.sub_menus">
                <div class="menuLv2Check">
                  <el-checkbox v-model="roleLv2.checked" @change="roleChange($event, roleLv2.roleLv)"
                               :disabled="disabled">
                    {{roleLv2.menus_name}}
                  </el-checkbox>
                </div>
                <div class="menuLv3Content">
                  <div class="menuLv3 roleItem" v-for="roleLv3 in roleLv2.sub_menus">
                    <el-checkbox v-model="roleLv3.checked" @change="roleChange($event, roleLv3.roleLv)"
                                 :disabled="disabled">
                      {{roleLv3.menus_name}}
                    </el-checkbox>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btnArea">
        <zy-button @click="back">{{type=='detail'?'返回':'取消'}}</zy-button>
        <zy-button @click="submit" type="primary" v-if="type=='add'||type=='edit'">提交</zy-button>
      </div>
    </zyInfoPanel>

  </div>
</template>

<script>
	export default {
		name: "GRoleDetail",
		props: {},
		data() {
			return {
				role_id: '',
				type: '',
				pageTitle: '',
				role_name: '',
				department_id: '',
				organizationList: [],
				remark: '',
				role_list: [],
				roleData: [],
				disabled: false
			};
		},
		computed: {
			postData() {
				let data = {role_id: this.role_id || '0'}
				return data;
			}
		},
		watch: {},
		components: {},
		methods: {
			back(isRefresh) {
				this.$blackRoute({
					path: "/permission_manager",
					name: "GRoleList",
					that: this,
					query: {isRefresh: isRefresh}
				})
			},
			getRoleIds(list) {
				console.log(list)
				list.forEach(item => {
					if (item.checked) {
						this.roleData.push(item.menus_id)
					}
					if (item.sub_menus && item.list.sub_menus) {
						item.list = this.getRoleIds(item.sub_menus);
					}
				});
			},
			submit() {
				this.getRoleIds(JSON.parse(JSON.stringify(this.role_list)));
				if (!this.role_name) {
					return this.$message.error('请输入角色名称');
				}
				if (!this.department_id) {
					return this.$message.error('请选择所属组织');
				}
				if (!this.roleData.length) {
					return this.$message.error('请选择角色权限');
				}
				console.log(this.role_list)
				let postData = {
					role_id: this.role_id || '',
					role_name: this.role_name || '',
					department_id: this.department_id || '',
					remark: this.remark || ''
				};
				postData['menus_ids'] = this.role_list;
				this.$axios.post(this.$api.admin_entryRole, {...postData}).then(res => {
					let {code, msg, data} = res;
					if (code == 200) {
						this.$message.success(msg)
						this.back(true)
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			getOrganizationData() {
				this.$axios.post(this.$api.admin_allDepartment, {}).then(res => {
					let {code, data, msg} = res;
					if (code === 200) {
						this.organizationList = data.filter(item => {
							item.value = item.department_id;
							item.label = item.department_name;
							return item;
						}) || [];
					} else {
						this.$message.error(msg)
					}
				});
			},
			getData() {
				this.$axios.post(this.$api.admin_detailRole, {...this.postData}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.role_name = data.role_name || '';
						this.department_id = data.department_id || '';
						this.remark = data.remark || ''
						this.role_list = this.roleListHandle(data.permission) || []
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			roleListHandle(list, lv) {
				let roleList = [];
				list.forEach(item => {
					let roleLv = lv ? JSON.parse(JSON.stringify(lv)) : [];
					if (!roleLv.length) {
						roleLv = [item.menus_id];
					} else {
						roleLv.push(item.menus_id);
					}
					item.roleLv = roleLv;
					if (item.sub_menus && item.sub_menus.length) {
						this.roleListHandle(item.sub_menus, roleLv);
					}
					roleList.push(item);
				});
				return roleList;
			},
			roleChange(isSelect, role) {
				let roleList = JSON.parse(JSON.stringify(this.role_list));
				this.role_list = this.listChange(isSelect, roleList, role);
			},
			listChange(isSelect, list, role) {
				let roleList = [], selectedId = role[role.length - 1];
				list.forEach(item => {
					if (isSelect) {
						if (item.roleLv.indexOf(selectedId) != -1 || role.indexOf(item.menus_id) != -1) {
							item.checked = true;
						}
					} else {
						if (item.roleLv.indexOf(selectedId) != -1) {
							item.checked = false;
						}
					}
					if (item.sub_menus && item.sub_menus.length) {
						item.list = this.listChange(isSelect, item.sub_menus, role);
					}
					roleList.push(item);
				});
				return roleList;
			},
		},
		mounted() {
			this.role_id = this.$route.query.role_id || '';
			this.type = this.$route.query.type || '';
			if (this.type == 'detail') {
				this.pageTitle = '角色详情';
				this.disabled = true;
			} else if (this.type == 'add') {
				this.pageTitle = '新增角色'
			} else {
				this.pageTitle = '编辑角色'
			}
			this.getData();
			this.getOrganizationData();
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/government/systemManage/roleDetail/index.less">

</style>
